<template>
  <div>
    <dv-border-box-2 style="padding: 0.2rem; box-sizing: border-box" :color="['#ccc', '#ccc']">
      <!-- 头部 -->
      <div style="display: flex; justify-content: space-between">
        <dv-decoration-8 style="width: 40%; height: 50px" />
        <span
          style="font-size: 25px; font-family: 'Courier New', Courier, monospace; font-weight: 700"
        >
          黄金璀璨后台数据
        </span>
        <dv-decoration-8 :reverse="true" style="width: 40%; height: 50px" />
      </div>
      <!--主体1 -->
      <dv-border-box-2
        style="margin-top: 20px; padding: 0.2rem; box-sizing: border-box"
        :color="['#ccc', '#ccc']"
      >
        <div style="display: flex; justify-content: space-between">
          <div>
            <dv-decoration-7 style="height: 50px"
              >&nbsp;&nbsp;公司人员明细&nbsp;&nbsp;</dv-decoration-7
            >
            <div>公司人数:{{ background_data.length }}</div>
            <div style="width: 500px; height: 400px; margin-top: 20px" id="main2"></div>
          </div>
          <div style="margin-top: 70px">
            <el-table
              :data="background_data"
              height="320"
              style="width: 100%; box-shadow: 0 0 0.05rem #ccc; color: black"
            >
            <el-table-column prop="_id" label="员工编号" width="240" />
              <el-table-column prop="identity_name" label="职位" width="120" />
              <el-table-column prop="authentic_name" label="姓名" width="120" />
              <el-table-column prop="bind_contact" label="用户联系方式" width="170" />
            </el-table>
          </div>
        </div>
      </dv-border-box-2>
      <!-- 主体2 -->
      <dv-border-box-2
        style="margin-top: 20px; padding: 0.2rem; box-sizing: border-box"
        :color="['#ccc', '#ccc']"
      >
        <div style="display: flex; justify-content: space-between">
          <div>
            <dv-decoration-7 style="height: 50px"
              >&nbsp;&nbsp;app注册人数&nbsp;&nbsp;</dv-decoration-7
            >
            <div>当前注册人数:{{ data_all }}</div>
            <div style="width: 500px; height: 400px" id="main"></div>
          </div>
          <div style="margin-top: 70px">
            <el-table
              :data="tableData"
              height="320"
              style="width: 100%; box-shadow: 0 0 0.05rem #ccc; color: black"
            >
              <el-table-column prop="name" label="用户昵称" width="180" />
              <el-table-column prop="age" label="用户年龄" width="180" />
              <el-table-column prop="vip_grade" label="用户vip等级" width="170" />
              <el-table-column prop="tell" label="用户联系方式" width="170" />
            </el-table>
          </div>
        </div>
      </dv-border-box-2>

      <!-- 主题三 -->
      <dv-border-box-2
        style="margin-top: 20px; padding: 0.2rem; box-sizing: border-box"
        :color="['#ccc', '#ccc']"
      >
        <div style="display: flex; justify-content: space-between">
          <div>
            <dv-decoration-7 style="height: 50px"
              >&nbsp;&nbsp;vip人数&nbsp;&nbsp;</dv-decoration-7
            >
            <div>当前注册人数:{{ data_all }}</div>
            <div style="width: 500px; height: 400px" id="main4"></div>
          </div>
          <div style="margin-top: 70px">
            <el-table
              :data="tableData"
              height="320"
              style="width: 100%; box-shadow: 0 0 0.05rem #ccc; color: black"
            >
              <el-table-column prop="name" label="用户昵称" width="180" />
              <el-table-column prop="age" label="用户年龄" width="180" />
              <el-table-column prop="vip_grade" label="用户vip等级" width="170" />
              <el-table-column prop="tell" label="用户联系方式" width="170" />
            </el-table>
          </div>
        </div>
      </dv-border-box-2>
    </dv-border-box-2>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import './Css/user_Treemap.css'
import { getuse, get_background_user } from '@/request/api/api.ts'
onMounted(() => {
  getchat()
  getchat2()
  getchat3()
})

let data_all = ref(0)
let tableData = ref([])
let background_data= ref([])

// 用户注册人数
const getchat = async () => {
  let data: any = await getuse({})
  data_all.value = data.data_all
  tableData.value = data.userdata

  type EChartsOption = echarts.EChartsOption
  var chartDom = document.getElementById('main')!
  var myChart = echarts.init(chartDom)
  var option = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [10, 100],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: data.data.shiba, name: '18-25' },
          { value: data.data.erliu, name: '26-35' },
          { value: data.data.sanliu, name: '36-45' },
          { value: data.data.siliu, name: '46-55' },
          { value: data.data.wuliu, name: '56以上' }
        ]
      }
    ]
  }
  option && myChart.setOption(option)
}

const getchat2 = async() => {
  let data = await get_background_user({})
  background_data.value = data.data
  var chartDom = document.getElementById('main2')
  var myChart = echarts.init(chartDom)
  var option = {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: data.usercount.laoban, name: '老板' },
          { value: data.usercount.jingli, name: '经理' },
          { value: data.usercount.kefu, name: '客服' },
          { value: data.usercount.xiaoshou, name: '销售' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  option && myChart.setOption(option)
}
const getchat3 = () => {
  var chartDom = document.getElementById('main4')
  var myChart = echarts.init(chartDom)
  var option = {
    xAxis: {
      type: 'category',
      data: ['18-25', '26-35', '36-45', '46-55', '56-65', '66-75']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  }
  option && myChart.setOption(option)
}
</script>

<style lang="scss" scoped>
</style>